<template>
  <div>
      <div id="pdfDom" ref="pdfDom" >
        <!-- 工艺流程卡 -->
        <div  v-if="pdfType==='face'">
          <div class="page" v-for="item in arrayList" :key="item.id">
            <span style="display:none">{{item.cutterList =  item.planTaskCutters}}</span>
            <span v-if="item.cutterList.length>15" style="display:none">{{cutterListCopyA =  item.cutterList.slice(0,15)}} {{cutterListCopyB =  item.cutterList.slice(15,item.cutterList.length)}}</span>
            <span v-else-if="item.cutterList.length<=15" style="display:none">
              {{cutterListCopyA = item.cutterList}}
              {{cutterListCopyB =[]}}
            </span>
            <!-- 头部 -->
            <div class="page-header">
              <el-row type="flex" class="row-bg">
                <el-col :span="8"><div class="logoImage"><img :src="logoImage" alt=""></div></el-col>
                <el-col :span="8"><div class="title text-center align-bottom">生产用计算机软件确认表</div></el-col>
                <el-col :span="8"><div class="text-right align-bottom fz-8"><br><br>QR05-008/B</div></el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
              </el-row>
            </div>
            <div>
              <!-- 基本信息表 -->
              <table border="1" cellspacing="0" cellpadding="1" bordercolor="#000000" class="myTable">
                <tr>
                    <th colspan="2"  width="12%" style="padding:1px;">软件名称</th>
                    <th colspan="3"  style="font-size:12px; font-weight:normal"  width="15%">数铣加工软件</th>
                    <th colspan="2" width="12%" style="padding:1px;">软件版本号</th>
                    <th colspan="3"    style="font-size:12px; font-weight:normal" width="27%"></th>
                    <th colspan="2" width="12%" style="padding:1px;">软件开发日期</th>
                    <th colspan="3"    style="font-size:12px; font-weight:normal" width="21%">{{timestampToTime(new Date(),'yyyy.mm.dd')}}</th>
                </tr>

                <tr>
                    <th colspan="2"  width="12%" style="padding:1px;">软件运行时间</th>
                    <th colspan="3" style="font-size:12px; font-weight:normal"  width="21%">{{item.runTime}}/分钟</th>
                    <th colspan="2" width="12%" style="padding:1px;">适用项目名称</th>
                    <th colspan="3"  style="font-size:12px; font-weight:normal" width="27%"></th>
                    <th colspan="2" width="12%" style="padding:1px;">适用产品图号</th>
                    <th colspan="3"  style="font-size:12px; font-weight:normal" width="23%"></th>
                </tr>                
                <tr>
                    <th colspan="2"  width="12%" style="padding:1px;">适用产品名称</th>
                    <th colspan="3" style="font-size:12px; font-weight:normal"  width="21%">配置2</th>
                    <th colspan="4" width="20%" style="padding:1px;">产品工序号/工序名称</th>
                    <th colspan="1"  style="font-size:12px; font-weight:normal" width="19%"></th>
                    <th colspan="2" width="12%" style="padding:1px;">使用设备编号</th>
                    <th colspan="3"  style="font-size:12px; font-weight:normal" width="23%"></th>
                </tr>                
                <tr>
                    <th colspan="2"  width="12%" style="padding:1px;">软件存储位置</th>
                    <th colspan="4" style="font-size:12px; font-weight:normal"  width="27%"></th>
                    <th colspan="2" width="12%" style="padding:1px;">软件开发人员</th>
                    <th colspan="2"  style="font-size:12px; font-weight:normal" width="21%">张军</th>
                    <th colspan="2" width="12%" style="padding:1px;">软件互审人员</th>
                    <th colspan="3"  style="font-size:12px; font-weight:normal" width="23%"></th>
                </tr>                 
                <tr>
                    <th colspan="2"  width="12%" style="padding:1px;">操作者</th>
                    <th colspan="4" style="font-size:12px; font-weight:normal"  width="27%"></th>
                    <th colspan="2" width="12%" style="padding:1px;">首件检验员</th>
                    <th colspan="2"  style="font-size:12px; font-weight:normal" width="21%"></th>
                    <th colspan="2" width="12%" style="padding:1px;">仿真确认</th>
                    <th colspan="3"  style="font-size:12px; font-weight:normal" width="23%"></th>
                </tr>                 
                <tr>
                    <th colspan="2"  width="12%" style="padding:1px;">主管工艺</th>
                    <th colspan="4" style="font-size:12px; font-weight:normal"  width="27%"></th>
                    <th colspan="2" width="12%" style="padding:1px;">首次装夹</th>
                    <th colspan="2"  style="font-size:12px; font-weight:normal" width="21%">{{item.fristInstall}}/分钟</th>
                    <th colspan="2" width="12%" style="padding:1px;">装夹时间</th>
                    <th colspan="3"  style="font-size:12px; font-weight:normal" width="23%">{{item.install}}/分钟</th>
                </tr> 
                <tr>
                    <td colspan="17" style="text-align:center;padding:5px;">{{item.processFaceName}}面（刀具清单以及技术要求）</td>
                </tr>              
              </table>
              <!-- 面（刀具清单以及技术要求） -->
              <div >
                <table border="1" cellspacing="0" cellpadding="1" bordercolor="#000000" class="myTable">
                  <tr>
                      <th style="padding:1px;">刀号</th>
                      <th style="padding:1px;"  v-for="(cutter,index) in cutterListCopyA"  :key="index">T{{index+1}}</th>
                  </tr>
                  <tr>
                    <th style="padding:1px;">直径</th>
                    <td style="padding:1px; text-align:center;" v-for="(cutter,index) in cutterListCopyA" :key="index">{{cutter.diameter}}</td>
                  </tr>
                  <tr>
                    <th style="padding:1px;">深度</th>
                    <td style="padding:1px; text-align:center;" v-for="(cutter,index) in cutterListCopyA" :key="index">{{cutter.depth}}</td>
                  </tr>
                  <tr>
                    <th style="padding:1px;">刃长</th>
                    <td style="padding:1px; text-align:center;" v-for="(cutter,index) in cutterListCopyA" :key="index">{{cutter.blade}}</td>
                  </tr>
                  <tr>
                    <th style="padding:1px;">磨</th>
                    <td style="padding:1px; text-align:center;" v-for="(cutter,index) in cutterListCopyA" :key="index">{{cutter.mo}}</td>
                  </tr>
                </table>
                <br>
                <table border="1" cellspacing="0" v-if="cutterListCopyB.length>0" cellpadding="1" bordercolor="#000000" class="myTable">
                  <tr>
                      <th style="padding:1px;">刀号</th>
                      <th style="padding:1px;"  v-for="(cutter,index) in cutterListCopyB"  :key="index">T{{cutterListCopyA.length+index+1}}</th>
                  </tr>
                  <tr>
                      <th style="padding:1px;">直径</th>
                    <td style="padding:1px; text-align:center;" v-for="(cutter,index) in cutterListCopyB" :key="index">{{cutter.diameter}}</td>
                  </tr>
                  <tr>
                      <th style="padding:1px;">深度</th>
                    <td style="padding:1px; text-align:center;" v-for="(cutter,index) in cutterListCopyB" :key="index">{{cutter.depth}}</td>
                  </tr>
                  <tr>
                      <th style="padding:1px;">刃长</th>
                    <td style="padding:1px; text-align:center;" v-for="(cutter,index) in cutterListCopyB" :key="index">{{cutter.blade}}</td>
                  </tr>
                  <tr>
                      <th style="padding:1px;">磨</th>
                    <td style="padding:1px; text-align:center;" v-for="(cutter,index) in cutterListCopyB" :key="index">{{cutter.mo}}</td>
                  </tr>
                </table>
                <table  border="1" cellspacing="0" cellpadding="1" bordercolor="#000000" class="myTable">
                  <tr >
                    <td colspan="17" style="padding:2px;">
                      <div style="width:100%;height:90px;">
                        <span style=" font-weight: bolder;margin-left:2px;margin-top:5px;">技术要求:</span>
                        <br>
                        <span v-html="item.techReq"></span>
                      </div>
                    </td>
                  </tr>
                  <tr>  
                    <td colspan="17">
                      <div style="width:100%;height:401px;">
                      <div class="left"  :style="{width:'735px',height:'400px',border:'3px solid gray',padding:'1px'}">
                        <img :src="item.path" style="width:735px;height:399px;"/>
                      </div>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import logoImage from "images/logo.png"
import materielApi from 'plugins/axios/materielApi.js';

export default {
    name:'process-flow-card',
    props:{
      pdfType:{
        type:String
      }
    },
    data(){
        return {
          cutterListCopyA:[],
          cutterListCopyB:[],
          linkIndex:0,
          username:localStorage.getItem('ms_username'),
          logoImage,
          codeImage:'',
          contentObj:{},
          arrayList:[],
          processHeader:'',
          pageContentHeight:'809',/**每一页内容的高度 */
          totalPages:1/***总页数 */
        }
    },

    methods:{
        getCgPdfData(data){
            let self = this;
            let nowDate = new Date();
            let total=0;
            self.arrayList = [];
            if(data!=null && data!=undefined && data.length>0){
              data.forEach(element => {
                self.arrayList.push(element)
              });
            }
            setTimeout(()=>{
                    self.$print(self.$refs.pdfDom);
             },500) 
            // materielApi.printProcess(id).then(res=>{
            //   debugger;
            //   let sumHeight = 0;
            //   self.totalPages = 1;
              
            //   if(self.pdfType==='process'){
            //     self.contentObj.makeNo=res.content.makeNo,
            //     self.contentObj.drawCode=res.content.drawCode,
            //     self.contentObj.drawName=res.content.drawName
            //     let obj=[];
            //     self.arrayList=[{
            //       currentPage:1,
            //       dataList:[]
            //     }]
            //    res.content.planTaskProcesses.forEach((item,index)=>{
            //       let paging=false;
            //      let divHtml = document.createElement('div');
            //      divHtml.innerHTML =item.content+item.checkContent;
            //       let f = document.body.appendChild(divHtml);
            //       f.setAttribute('style', 'font-size:10px;');
            //       let height = f.clientHeight;
            //       f.parentNode.removeChild(f);
            //       sumHeight+=height;
            //       if(sumHeight/self.pageContentHeight>self.totalPages){
            //         self.totalPages++;
            //         paging=true;
            //         self.arrayList.push({
            //           currentPage:self.totalPages,
            //           dataList:[
            //             {
            //             paging,
            //             height,
            //             currentPage:self.totalPages,
            //             no:item.no,
            //             name:item.nameName,
            //             content:item.content,
            //             gz:item.gz,
            //             predictWorkTime:item.predictWorkTime,
            //             confirmWorkTime:item.confirmWorkTime
            //           },{
            //             name:'检',
            //             content:item.checkContent,
            //             gz:item.checkGz,
            //             predictWorkTime:item.checkPredictWorkTime,
            //             confirmWorkTime:item.checkConfirmWorkTime
            //           }]
            //         })
            //       }else{
            //         paging=false;
            //         self.arrayList[self.arrayList.length-1].dataList = self.arrayList[self.arrayList.length-1].dataList.concat([
            //           {
            //             paging,
            //             height,
            //             currentPage:self.totalPages,
            //             no:item.no,
            //             name:item.nameName,
            //             content:item.content,
            //             gz:item.gz,
            //             predictWorkTime:item.predictWorkTime,
            //             confirmWorkTime:item.confirmWorkTime
            //           },
            //           {
            //             name:'检',
            //             content:item.checkContent,
            //             gz:item.checkGz,
            //             predictWorkTime:item.checkPredictWorkTime,
            //             confirmWorkTime:item.checkConfirmWorkTime
            //           }
            //         ])
            //       }
            //     })
            //    console.log(self.arrayList);
            //   }else{
            //     if(res.content.planTaskProcesses.length<18){
            //       for(let i =res.content.planTaskProcesses.length-1;i<18;i++){
            //         res.content.planTaskProcesses.push({
            //           no:i+1,
            //           nameName:''
            //         })
            //       } 
            //     }
            //     self.contentObj = res.content;
            //     console.log(res.content.planTaskProcesses);
            //   } 
            //   debugger;
            //    if(self.pdfType==='material'){
            //        self.contentObj.makeNo=res.content.makeNo,
            //         self.contentObj.drawCode=res.content.drawCode,
            //         self.contentObj.drawName=res.content.drawName
            //         let obj=[];
            //         self.arrayList=[{
            //           currentPage:1,
            //           dataList:[]
            //     }]
            //    }

            //    self.contentObj.drawMaterialName=res.content.draw.drawMaterialName
            //      let  drawLength= res.content.draw.drawLength?res.content.draw.drawLength+"mm":""
            //      let  drawWide=res.content.draw.drawWide?res.content.draw.drawWide+"mm":""
            //      let drawHigh= res.content.draw.drawHigh?res.content.draw.drawHigh+"mm":""
            //   if(res.content.draw.type==='1'){
            //         self.contentObj.size=drawLength+drawWide+drawHigh
            //     } else if(res.content.draw.type==='2'){
            //       self.contentObj.size="￠"+ "直径"+drawWide+"高"+drawHigh
            //     } else{
            //         self.contentObj.size= drawLength+drawWide+drawHigh
            //     }
            //     console.log(self.contentObj.size);
            //     console.log(self.contentObj.drawMaterialName);
            //     //遍历数组  判断一下是空或者是undefined
            //       if(self.contentObj.planTaskProcesses !=null &&self.contentObj.planTaskProcesses!=undefined){
            //            self.contentObj.planTaskProcesses.forEach(item=>{
            //             let total=item.predictWorkTimeTotal*self.contentObj.nums+item.wbPrice
            //             if(!isNaN(total)){
            //                 item.predictWorkTimeTotal= self.roundFun(total,2);
            //             }
            //           })
            //       }
               
            //       let drawNo=  self.contentObj.drawNo;
            //     if(drawNo!==null){
            //        self.contentObj.makeNo=  self.contentObj.makeNo+"-"+drawNo
            //     }
                
            //  setTimeout(()=>{
            //         self.$print(self.$refs.pdfDom);
            //  },100) 
            // })          
        },
        //四舍五入，保留位数为roundDigit
       roundFun(numberRound,roundDigit)  {
              if (numberRound>=0){
                  var tempNumber = parseInt((numberRound * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit);
                  return tempNumber;
               }else {
                  numberRound1=-numberRound
                  var tempNumber = parseInt((numberRound1 * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit);
                  return -tempNumber;
              }
         },
  
    }
}
</script>
<style scoped>


.page{
  max-width: 1090px;
  min-width: 794px;
  padding:28px 28px;
  box-sizing: border-box;
  font-size: 10px;
  height:1090px;
  margin-bottom:48px;
}
.page1{
  height: auto;
}
.page:last-child{
   margin-bottom:0px;
}
.page .fz-8{
  font-size: 8px;
}
.page .padding10{
  padding:10px;
  box-sizing: border-box;
}
.page .fw-bold{
  font-weight:500;
}
.page .fw-normal{
 font-size:12px;
 font-weight: normal;
}
.page .lineH-2{
  line-height: 2;
}
.page .border-bottom{
 border-bottom: 1px solid #333;
}
.page .width5{
  width: 5px;
}
.page .width10{
  width: 10px;
}
.page .width20{
  width: 20px;
}
.page .width40{
  width: 40px;
}
.page .width30{
  width: 30px;
}
.page .width60{
 width: 60px;
}

.page .width120{
  width: 120px;
}
.page img{
  line-height: 1;
  height: 100%;
}
.page  .title{
  font-size:18px;
}
.page .codeImage{
  height:80px;
}
.page  .logoImage{
  height:40px;
}
.page .myTable{
  width:100%;
}
.page .myTable th{
  font-weight: 600;
}
.page .myTable td,.page .myTable th{
  border:1px solid #000;
  font-size: 14.5px;
  
}

</style>
<style type="text/css" media="print">
@page {
  size: auto;
  margin: 0mm;
}
.always {
  page-break-after: always;
}
</style>